<template>
  <div>
    <div class="box">
      <div class="main">
        <img :src="food.imgUrl" alt="1" />
        <div class="details">
          <h4>{{ food.name }}</h4>
          <p class="collocation">{{ food.goodsDesc }}</p>
          <p class="sales">
            <span>月售{{ food.sellCount }}份</span>
            <span>好评率{{ food.rating }}%</span>
          </p>
          <p class="price"><span class="sign">￥</span>{{ food.price }}</p>
        </div>
      </div>
      <p class="bnt">
        <button v-if="this.food.num" class="add jian" @click="less(food.id)">
          -
        </button>
        <span v-if="this.food.num">{{ food.num }}</span>
        <button class="add" @click="add(food.id, food)">+</button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["food"],
  created() {},
  data() {
    return {
      // food: {},
    };
  },

  methods: {
    add(v, d) {
      this.$store.commit("ADD", { data: this.food.num, value: v });
    },

    less(v) {
      // v--;
      this.$store.commit("Less", { data: this.food.num, value: v });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  border-bottom: 1px solid #ccc;
  .bnt {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    .add {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: rgb(26, 144, 255);
      line-height: 10px;
      color: #fff;
      margin: 0px 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .jian {
      background-color: #fff;
      color: #000;
      border: 1px solid #000;
    }
  }
}
.main {
  display: flex;
  padding-left: 10px;
  margin-top: 10px;
  img {
    width: 80px;
    height: 80px;
  }
  .details {
    margin-left: 5px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h4 {
      font-size: 14px;
    }
    .collocation {
      color: #ccc;
    }
    .sales {
      color: #ccc;
    }
    .price {
      font-size: 14px;
      color: red;
      .sign {
        font-size: 12px;
      }
    }
  }
}
</style>